<template>
	<div class="Register-from">
		<div class="Register-ul">
			<ul>
        <li>
          <div class="left-text">原密码</div>
          <div class="right-input"><input v-model="submit.oldPassword" type="password" class="" placeholder="请输入密码(6-16位)" /></div>
        </li>
				<li>
					<div class="left-text">密码</div>
					<div class="right-input"><input v-model="submit.password" type="password" class="" placeholder="请输入密码(6-16位)" /></div>
				</li>
				<li>
					<div class="left-text">确认密码</div>
					<div class="right-input"><input v-model="submit.passwordAge" type="password" class="" placeholder="请再次输入密码" /></div>
				</li>
			</ul>
		</div>
		<!-- btn -->
		<div class="Register-btn" @click="submitInfo()">
			完成
		</div>
	</div>
</template>

<script>
  import {baseService} from '#/service'
	export default {
		name: 'forgetPassword',
		data() {
			return {
			  submit:{
          oldPassword: "",
          password: "",
          passwordAge:"",


        },
        rules:{
          oldPassword:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'原密码不能为空！'
              },
              {
                type:'inFun',
                rule:'minLength(6)',
                msg:'密码为最短为6位字符'
              },
              {
                type:'inFun',
                rule:'maxLength(16)',
                msg:'最大长度不能超过16个字符'
              },
            ] ,
            value:'',
            join:'and'
          },
          password:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'密码不能为空！'
              },
              {
                type:'inFun',
                rule:'minLength(6)',
                msg:'密码为最短为6位字符'
              },
              {
                type:'inFun',
                rule:'maxLength(16)',
                msg:'最大长度不能超过16个字符'
              },
            ] ,
            value:'',
            join:'and'
          },
          passwordAge:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                equal:'password',
                msg:'两次密码不一致！'
              }
            ] ,
            value:'',
            join:'and'
          },
        },
        result:{},
				CodeVal: '获取验证码',
				Time:'',
			}
		},
    watch: {
      'submit.oldPassword': {
        immediate: true,
        handler(newVal) {
          this.rules.oldPassword.value = newVal
        },
      },
      'submit.password': {
        immediate: true,
        handler(newVal) {
          this.rules.password.value = newVal
        },
      },
      'submit.passwordAge': {
        immediate: true,
        handler(newVal) {
          this.rules.passwordAge.value = newVal
        },
      }
    },
		methods:{
      submitInfo(){
        this.$nextTick(()=>{
          this.result=this.$valiForm.form(this.rules);
          if(this.result.adopt){
            baseService.editPassword({
              data:this.submit,
              success:()=>{
                this.$toast({
                  message: '操作成功',
                  position: 'middle',
                  duration: 2000
                });
                setTimeout(()=>{
                  this.$router.push({
                    name:'index'
                  },1000)
                })
              }
            })

          }else{
            let keys=Object.keys(this.result)
            for(let i=0;i<keys.length;i++){
              if(keys[i]!=='adopt'){
                this.$toast({
                  message: this.result[keys[i]].msg,
                  position: 'middle',
                  duration: 2000
                });
                return
              }
            }
          }
        })

      },
			GetCode: function() {
				var time = 10;
				var _This = this;
				var dis = this.$refs.code;
				_This.Time = setInterval(function(){   //可以封装方法
						 time --;
						 if( time==0 ){
						 	   clearInterval(_This.Time);
						 	   _This.CodeVal = '重新获取';
						 	   dis.disabled = false;
						 	   time = 10;
						 }else{
						 		dis.disabled = true;
						 		_This.CodeVal = '已发送' + time + 's';
						 }
				},1000)
			}
		}
	}
</script>

<style>
	html,
	body {
		font-size: 26.666666666667vw;
		background: #efefef;
	}

	* {
		margin: 0;
		padding: 0;
	}

	img {
		border: none;
	}

	input {
		border: none;
		background: none;
		outline: none;
	}

	ul,
	li {
		list-style: none;
	}

	a {
		text-decoration: none;
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.Register-from {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.Register-ul {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.Register-ul ul li {
		width: 100%;
		height: 0.44rem;
		float: left;
		border-bottom: 0.01rem solid #eee;
		background: white;
	}

	.Register-ul ul .backLi {
		width: 100%;
		height: 0.1rem;
		float: left;
		background: none;
	}

	.left-text {
		width: 1.35rem;
		margin-left: 0.18rem;
		height: 0.44rem;
		line-height: 0.44rem;
		color: #4097ff;
		font-size: 0.14rem;
		float: left;
	}

	.right-input {
		float: left;
	}

	.right-input input {
		float: left;
		width: 2rem;
		height: 0.28rem;
		padding: 0.08rem 0;
		font-size: 0.14rem;
	}

	#code button {
		border: none;
		outline: none;
		width: 0.8rem;
		height: 0.3rem;
		display: block;
		line-height: 0.3rem;
		background: rgb(142,10,190);
		border-radius: 0.05rem;
		color: white;
		text-align: center;
		margin-top: 0.07rem;
	}

	.Register-btn {
		width: 90%;
		margin: 0.3rem auto 0 auto;
		height: 0.38rem;
		line-height: 0.38rem;
    background: rgb(142,10,190);
		text-align: center;
		color: white;
		font-size: 0.12rem;
		border-radius: 0.05rem;
	}
</style>
